<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            background: url(img/bg.jpg) no-repeat center;
            background-size: cover;
            height: 100%;
        }
        
        input {
            outline: none;
            box-sizing: border-box;
        }
        
        .register {
            width: 500px;
            background: #fff;
            opacity: .9;
            margin: 100px auto;
            overflow: hidden;
            border-radius: 15px;
            text-align: center;
        }
        
        .form-horizontal {
            margin: 0 14px;
            text-align: center;
        }
        
        .form-group {
            width: 100%;
        }
        
        .form-group:nth-last-child(1) {
            margin: 10px auto;
        }
        
        .form-group:nth-last-child(1) #send {
            outline: none;
            margin: 0 auto;
            width: 80px;
        }
        
        input.form-control {
            width: 70%;
            /* float: left; */
        }
        
        .control-label {
            width: 25%;
            /* float: left; */
        }
    </style>
</head>

<body>
    <div class="register">
        <h2>用户注册</h2>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名：</label>
                <input type="text" id="username" class="form-control" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="realname" class="col-sm-2 control-label">姓名：</label>
                <input type="text" id="realname" class="form-control" placeholder="请输入真实姓名">
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码：</label>
                <input type="password" id="password" class="form-control" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <label for="repassword" class="col-sm-2 control-label">确认密码：</label>
                <input type="password" id="repassword" class="form-control" placeholder="请确认密码">
            </div>
            <div class="form-group">
                <label class="radio-inline">
                    <input type="radio" name="type" id="isTeacher" checked>老师
                </label>
                <label class="radio-inline">
                    <input type="radio" name="type" id="isStudent">学生
                </label>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" id="send">注册</button>
            </div>
        </div>
    </div>


</body>

</html>
<script src="lib/jquery.min.js"></script>
<script src="lib/common.js"></script>

<script>
    $(window).keydown(function(e) {
        if (e.keyCode == 13) {
            $("#send").click();
        }
    })
    $("#send").click(function() {
        let username = $("#username").val();
        let password = $("#password").val();
        let repassword = $("#repassword").val();
        let realname = $("#realname").val();
        if (username && password && repassword && realname) {
            if (repassword !== password) {
                alert("两次密码输入不一致")
                return;
            }
            $.ajax({
                url: `${address}/register`,
                method: "get",
                data: {
                    username: $("#username").val(),
                    password: $("#password").val(),
                    realname: $("#realname").val(),
                    usertype: $("#isTeacher")[0].checked ? 1 : 0
                },
                success(data) {
                    if (data === "error") {
                        alert("注册失败")
                    } else {
                        alert("注册成功")
                        location.href = `${address}/login.html`;
                    }
                }
            })
        }
    })
</script>